<template>
  <div>
    <contentPage>
      <div v-show="isHaveLogin" class="myInfo_warp1">
        <img class="myInfo_header_img" :src="userInfo.headImgUrl" alt="">
        <div class="myInfo_header_name">{{ userInfo.userName }}</div>
      </div>
      <div v-show="!isHaveLogin" class="myInfo_warp1">
        您暂未登录， <span class="myInfo_warp1_login">去登录</span>
      </div>
      <div class="myInfo_warp2">
        <div class="myInfo_warp2_record">
          <div class="myInfo_warp2_num">1</div>
          <div class="myInfo_warp2_text">付费查询</div>
        </div>
        <div class="myInfo_warp2_record">
          <div class="myInfo_warp2_num">0</div>
          <div class="myInfo_warp2_text">报告订阅统计</div>
        </div>
      </div>
      <div class="myInfo_warp3">
        <page-link l-title="账户余额" icon-type="0" :r-desc="accountNum" :other-color="true" page-link="account" />
        <page-link l-title="邀请有礼" icon-type="1" r-desc="邀请好友得金币" page-link="invite" />
        <page-link l-title="分享有礼" icon-type="2" r-desc="分享报告得金币" page-link="share" />
        <page-link l-title="冰币获取规则" icon-type="0" r-desc="" page-link="" />
        <!--<page-link l-title="意见反馈" icon-type="0" r-desc="" :other-color="true" page-link="feedBack" />-->
        <page-link l-title="开通会员" icon-type="5" r-desc="" page-link="member" />
      </div>
    </contentPage>
    <footerPage />
  </div>
</template>

<script>
import footerPage from '../../components/footer_page'
import contentPage from '../../components/content_page'
import pageLink from '../../components/page_link'
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'Myself',
  components: { footerPage, contentPage, pageLink },
  data() {
    return {
      isHaveLogin: true,
      surplusNum: 50,
      userInfo: {
        userName: '',
        headImgUrl: '',
        balance: 0,
      },
    }
  },
  computed: {
    accountNum() {
      return this.surplusNum + '冰币'
    },
  },
  created() {
    this.getUserInfo()
  },
  mounted() {
  },
  methods: {
    getUserInfo() {
      const param = {
        token: sessionStorage.getItem('token'),
      }
      axios.post('/getUserInfo', qs.stringify(param)).then(res => {
        if (res.data.code === 200) {
          this.userInfo = res.data.data
          this.surplusNum = res.data.data.balance
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";
  .myInfo_warp1 {
    display: flex;
    border-bottom: 2px solid #f9f9f9;
    align-items: center;
    height: pxTorem(240px);
    padding: pxTorem(20px) 0 pxTorem(40px) pxTorem(30px);
    font-size: pxTorem(34px);

    .myInfo_header_img {
      width: pxTorem(180px);
      height: pxTorem(180px);
      border-radius: 50%;
    }

    .myInfo_header_name {
      font-size: pxTorem(34px);
      font-weight: 600;
      margin-left: pxTorem(20px);
    }

    .myInfo_warp1_login {
      font-weight: 600;
    }
  }
  .myInfo_warp2 {
    display: flex;
    box-shadow: 0 4px 5px -3px #999999;
    .myInfo_warp2_record {
      width: pxTorem(240px);
      font-size: pxTorem(34px);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      .myInfo_warp2_num {
        font-size: pxTorem(46px);
        font-weight: 600;
        margin: pxTorem(30px) 0 pxTorem(20px) 0;
      }

      .myInfo_warp2_text {
        font-size: pxTorem(30px);
        color: #333333;
        padding-bottom: pxTorem(20px);
      }
    }
  }

  .myInfo_warp3{
    border-top: pxTorem(30px) solid #f9f9f9;
    .myInfo_warp_ul{
      padding: 0 pxTorem(40px);
      .myInfo_warp_li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: pxTorem(24px) 0;
        border-bottom: 1px solid #f9f9f9;
        .myInfo_warp_li_left{
          font-size: pxTorem(32px);
          font-weight: 600;
          color: #333333;
          display: flex;
          align-items: center;
          .mwl_left_text{
            margin-left: pxTorem(8px);
          }
        }
        .myInfo_warp_li_right{
          font-size: pxTorem(28px);
          display: flex;
          align-items: center;
          color: #999999;
          .mwl_right_text{}
          .mwl_right_img{}
          .mwl_right_text2{
            color: #ffcc00;
          }
        }
      }
    }
  }
</style>
